<template>
  <div class="template-index-Lu">
    <commpVxeTable
      :key="reCommpVxeTable"
      :config="dataTableConfig"
      :columns="columnsVxe"
      :formItem="formItem"
      @checkboxChange="checkboxChange"
      ref="administrativeOffice"
      @searchEvent="searchEvent"
      @resetEvent="resetEvent"
      >
      <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
        <a-form layout="inline" class="search-form" >
            <a-form-item>
                <a-button class="blue-btn" @click="viewRor(row)">办理</a-button>
            </a-form-item>
        </a-form>
      </template>
    </commpVxeTable>
    <applicationForm ref="applicationFormRef" :formData="formData" :linkName="linkName" :stepNums="stepNums"  @success="success"></applicationForm>
  </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import applicationForm from '../index/applicationForm.vue'
export default {
  components: {
    commpVxeTable,
    applicationForm,
  },
  props:{
    linkName:{
      type:String,
      default:'',
      required:false,
    }
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.list,
        rowId: 'id',
        urlType: true,
        paramet:{
          fhjmc: this.linkName,
        }
      },
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '申请人',
          field: 'fxm',
          width: 100,
        },{
          title: '职务',
          field: 'fzw',
          width: 100,
        },{
          title: '加班/值班事由',
          field: 'fjbzbsy',
        },{
          title: '加班/值班开始时间',
          field: 'fjbzbkssj',
          width: 150,
        },{
          title: '加班/值班结束时间',
          field: 'fjbzbjssj',
          width: 150,
        },{
          title: '时长',
          field: 'fjbzbsc',
          width: 150,
        },
        // {
        //   title: '发送人',
        //   field: 'ffsrmc',
        //   width: 100,
        // },
        {
          title: '发送时间',
          field: 'ffssj',
          width: 150,
        },{
          title: '操作',
          field: 'jobid',
          width: 200,
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      formItem: [
        {
          label: '申请人',
          model: 'fxm'
        },{
          label: '类别',
          model: 'flb',
          placeholder: '类别',
          type:'Select',
          dictionaryType:''
        }
      ],
      jobidList: [],
      stepNums: 0,
      formData: {},

      reJobid: '',
      oaId: '',

    }
  },
  created(){
    this.stepNums = Number(this.stepNum)
  },
  methods: {
     // 勾选
     checkboxChange(val){
      //console.log('已选择',val)
      this.jobidList = []
      if(val.length){
        val.forEach(item => {
            this.jobidList.push(item.jobid)
        });
      }
    },
    // 搜索
    searchEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
      //console.log(this.dataTableConfig.paramet)
    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    // 办理
    viewRor(row){
      this.formData = {
        ...row
      }
      this.formData.id = row.oaid

      let jobid = row.jobid
      // queryJobByJobId({jobid:jobid}).then(res => {
      //   //console.log(res)
      // })
      this.$nextTick(_ => {
            this.$refs.applicationFormRef.applicationFormVisible= true
        })
    },
    // 弹窗提交成功
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.resetEvent()
      this.jobidList = []
    },
  },
}
</script>
<style>
@import url('../../css/oaClass.css');
</style>
